<template>
  <div>
    <span v-show="!hasLogin">
      <div>
        <h4>你还未登录！请先登录！</h4>
      </div>
    </span>

    <span v-show="hasLogin">
      <el-button type="primary" @click="dialog()">添加日记</el-button>
      <div class="block">
        <el-timeline>
          <el-timeline-item
            :timestamp="diary.date"
            placement="top"
            v-for="(diary, index) in diarys"
            :key="index"
          >
            <el-card @click.native="Detail(diary.id)">
              <h2>
                {{ diary.company }}
              </h2>
              <p>{{ diary.post }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>

        <el-pagination
          class="mpage"
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          @current-change="page"
        >
        </el-pagination>
      </div>
    </span>

    <!-- 添加日记弹窗 -->
    <el-dialog title="添加日记" :visible.sync="dialogAdd" center width="40%">
      <div
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        "
      >
        <el-form :inline="true" label-width="100px">
          <el-form-item label="投递公司">
            <el-input
              v-model="form.company"
              placeholder="请输入公司"
            ></el-input>
          </el-form-item>

          <el-form-item label="投递岗位">
            <el-input v-model="form.post" placeholder="请输入岗位"></el-input>
          </el-form-item>

          <el-form-item label="投递时间">
            <el-date-picker
              v-model="form.date"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="投递状态">
            <el-select v-model="form.status" placeholder="请选择">
              <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="备注">
            <el-input
              type="textarea"
              autosize
              placeholder="请输入内容"
              v-model="form.remarks"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="add()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑日记弹窗 -->
    <el-dialog title="日记详情" :visible.sync="dialogEdit" center width="40%">
      <div
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        "
      >
        <el-form :inline="true" label-width="100px">
          <el-form-item label="投递公司">
            <el-input
              v-model="diaryEdit.company"
              placeholder="请输入公司"
            ></el-input>
          </el-form-item>

          <el-form-item label="投递岗位">
            <el-input
              v-model="diaryEdit.post"
              placeholder="请输入岗位"
            ></el-input>
          </el-form-item>

          <el-form-item label="投递时间">
            <el-date-picker
              v-model="diaryEdit.date"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="投递状态">
            <el-select v-model="diaryEdit.status" placeholder="请选择">
              <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="备注">
            <el-input
              type="textarea"
              autosize
              placeholder="请输入内容"
              v-model="diaryEdit.remarks"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="del(diaryEdit.id)">删 除</el-button>
        <el-button type="primary" @click="edit(diaryEdit)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Personal",
  data() {
    return {
      dialogAdd: false,
      dialogEdit: false,
      hasLogin: false,
      diarys: {},
      currentPage: 1,
      total: 0,
      pageSize: 5,

      stuId: this.$store.getters.getStudent.id,
      form: {
        stuId: this.$store.getters.getStudent.id,
        company: "",
        post: "",
        remarks: "",
        date: "",
        status: "",
      },
      diaryEdit: [],
      status: [
        {
          value: "已投递",
          label: "已投递",
        },
        {
          value: "线下面试",
          label: "线下面试",
        },
        {
          value: "线上面试",
          label: "线上面试",
        },
        {
          value: "面试通过",
          label: "面试通过",
        },
      ],
    };
  },
  created() {
    if (this.stuId) {
      this.hasLogin = true;
      this.page(1);
    }
  },
  methods: {
    page(currentPage) {
      const _this = this;
      _this.$axios
        .get("/diaryAll/" + _this.stuId + "?currentPage=" + currentPage)
        .then((res) => {
          // console.log(res);
          _this.diarys = res.data.data.records;
          _this.currentPage = res.data.data.current;
          _this.total = res.data.data.total;
          _this.pageSize = res.data.data.size;
        });
    },
    Detail(id) {
      const _this = this;
      _this.$axios.get("/diaryById/" + id).then((res) => {
        _this.diaryEdit = res.data.data;
        // console.log(_this.edit);
        this.dialogEdit = true; //显示弹窗
      });
    },
    del(id) {
      this.$confirm("是否删除该日记信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios.get("/delDiary/" + id).then((res) => {
            location.reload();
            this.$message({
              type: "success",
              message: res.data.msg,
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    edit(edit) {
      const d = edit.date;
      edit.date = this.filterTime(d);
      // console.log(edit.date); // 2022-02-16 00:00:00
      // console.log(edit.status);
      this.$axios.post("/diaryEdit", edit).then((res) => {
        // console.log(res);
        this.$message({
          message: res.data.msg,
          type: "success",
        });
        location.reload();
      });
    },
    add() {
      const d = this.form.date;
      this.form.date = this.filterTime(d);
      // console.log(this.form.date); // 2022-02-16 00:00:00
      // console.log(this.form.status);
      this.$axios.post("/diaryEdit", this.form).then((res) => {
        console.log(res);
        this.$message({
          message: res.data.msg,
          type: "success",
        });
        location.reload();
      });
    },
    dialog() {
      this.dialogAdd = true; //显示弹窗
    },
    filterTime(time) {
      var date = new Date(time);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + s;
    },
  },
};
</script>

<style scoped>
</style>
